<template>
  <el-card style="margin-top: 20px;min-height: 50vh">
    <template #header>
      <div class="card-header">
        <el-icon>
          <Management/>
        </el-icon>
        <span> 我的借阅</span>
      </div>
    </template>
    <el-table :data="borrowList" border :header-cell-style="{'background-color': '#f6f6f6'}" style="width: 100%;">
      <el-table-column v-for="item in tableType" :width="item.width" :label="item.label" align="center">
        <template #default="scope" v-if="item.showType!=='select'">
          <span>{{ scope.row[item.prop] }}</span>
        </template>
        <!--   状态   -->
        <template #default="scope" v-if="item.showType==='select'">
          <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
            {{ scope.row[item.prop] === 1 ? '正常' : '禁用' }}
          </el-tag>
        </template>
        <!--   借阅状态   -->
        <template #default="scope" v-if="item.showType==='borrow'">
          <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
            {{ scope.row[item.prop] === 1 ? '在库' : '借出' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="操作" align="center">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="showDetail(scope.$index, scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!--   借阅详情   -->
  <common-detail v-model:visible="DetailVisible" v-model:form="DetailForm" :close-visible="closeVisible"
                 :on-detail="onDetail" v-model:type="DetailType"/>
</template>

<script setup lang="ts">
import CommonDetail from "@/components/common/CommonDetail.vue";
import {Flag, Management} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import api from "@/api";

const tableType = [
  {label: '书本条码',width: '120',rules: [{required: false, message: '请输入书本条码', trigger: 'blur'}],showType: '',prop: 'code'}
  , {label: '书本名称',width: '',rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}],showType: '',prop: 'name'}
  , {label: '借阅时间',width: '200',rules: [{required: false, message: '请输入借阅时间', trigger: 'blur'}],showType: '',prop: 'borrowDate'}
];

const DetailType = [
  // {label: '编号', width: '', rules: [{required: false, message: '请输入编号', trigger: 'blur'}], showType: '', prop: 'id'}
  {label: '书本条码', width: '', rules: [{required: false, message: '请输入书本条码', trigger: 'blur'}], showType: '', prop: 'code'}
  // , {label: '书册编号', width: '', rules: [{required: false, message: '请输入书册编号', trigger: 'blur'}], showType: '', prop: 'booksId'}
  // , {label: '书册名称', width: '', rules: [{required: false, message: '请输入书册名称', trigger: 'blur'}], showType: '', prop: 'booksName'}
  , {label: '书本名称', width: '', rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}], showType: '', prop: 'name'}
  // , {label: '借阅用户', width: '', rules: [{required: false, message: '请输入借阅用户', trigger: 'blur'}], showType: '', prop: 'userName'}
  , {label: '借阅时间', width: '', rules: [{required: false, message: '请输入借阅时间', trigger: 'blur'}], showType: '', prop: 'borrowDate'}
  // , {label: '借阅状态', width: '', rules: [{required: false, message: '请输入借阅状态', trigger: 'blur'}], showType: 'borrowType', prop: 'borrow'}
  // , {label: '创建者', width: '', rules: [{required: false, message: '请输入创建者', trigger: 'blur'}], showType: '', prop: 'createBy'}
  // , {label: '创建时间', width: '', rules: [{required: false, message: '请输入创建时间', trigger: 'blur'}], showType: '', prop: 'createTime'}
  // , {label: '更新者', width: '', rules: [{required: false, message: '请输入更新者', trigger: 'blur'}], showType: '', prop: 'updateBy'}
  // , {label: '更新时间', width: '', rules: [{required: false, message: '请输入更新时间', trigger: 'blur'}], showType: '', prop: 'updateTime'}
  // , {label: '伪删除', width: '', rules: [{required: false, message: '请输入伪删除', trigger: 'blur'}], showType: 'select', prop: 'undock'}
  // , {label: '状态', width: '', rules: [{required: false, message: '请输入状态', trigger: 'blur'}], showType: 'select', prop: 'unlucky'}
  , {label: '备注', width: '', rules: [{required: false, message: '请输入备注', trigger: 'blur'}], showType: 'text', prop: 'remark'}
];
//详情
const DetailVisible = ref(false);
const DetailForm = ref({});
function showDetail(index: number, row: any) {
  DetailVisible.value = true;
  DetailForm.value = row;
}

function closeVisible(formEl: FormInstance | undefined) {
  DetailVisible.value = false;
}

function onDetail() {
  DetailVisible.value = false;
}

const borrowList = ref([]);
onMounted(() => {
  getMyBorrow();
})

function getMyBorrow() {
  api.bookno.findBooknoBorrow().then((res: any) => {
    borrowList.value = res.data;
  })
}

const checkBook = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入书本编号'))
  } else {
    callback()
  }
}

const checkType = (rule: any, value: any, callback: any) => {
  if (value === null) {
    return callback(new Error('请输入借阅类型'))
  }
  callback();
}

const rules = reactive<FormRules>({
  book: [{validator: checkBook, trigger: 'blur'}],
  type: [{validator: checkType, trigger: 'blur'}],
})
</script>